<template>
	<view class="square-page">
		<view class="square-list">
			<div class="square-item" v-for="(item,i) in list" :key="i">
				<div class="square-user-top">
					<div class="user-img">
						<image class="img" :src="item.avater || '/static/images/bj.png'" mode="aspectFill"></image>
					</div>
					<div class="user-cont">
						<div class="user-name">{{item.real_name}}</div>
						<div class="user-time">{{item.create_time}}</div>
					</div>
				</div>
				<div class="square-cont" @click="goto(item.id)">
					{{item.content}}
				</div>
				<div class="square-img" v-if="item.cover.length > 0">
					<div class="imgbox" v-for="(v,index) in item.cover" :key="index">
						<image class="img" :src="v" mode="aspectFill" @click="TanPreviewImage(index,item.cover)">
						</image>
					</div>
				</div>
			</div>
			<view class="noInfo" v-if="!list.length">
				<i class="Ticonfont Ticon-zanwushuju"></i>
				<span>暂无数据</span>
			</view>
		</view>
		<FootTabbar :currentIndex='3' />
		<view class="naviconentent" @click="toProblem" v-if="todos">
			<!-- <uni-icons style="color: #fff;" class="iconImg" type="info" size="25" color="#fff"></uni-icons> -->
			<i class="Ticonfont Ticon-fabu iconImg" style="color: #fff;"></i>
			<text class="problem">发布</text>
		</view>
	</view>
</template>

<script>
	import FootTabbar from '@/components/foot-tabbar/foot-tabbar.vue'
	import $store from '@/store/index.js';
	export default {
		components: {
			FootTabbar
		},
		data() {
			return {
				list: [],
				data: {
					size: 10,
					page: 1,
				},
				info: [{
						imglist: ['/static/images/banner1.jpg', '/static/images/banner2.jpg',
							'/static/images/banner3.jpg', '/static/images/banner4.jpg',
							'/static/images/banner1.jpg', '/static/images/banner2.jpg',
						],
						content: '今天发布了一条招聘信息，有需要的话可以联系下方电话号码，1517023xxxxxx'
					},
					{
						imglist: ['/static/images/banner1.jpg', '/static/images/banner2.jpg',
							'/static/images/banner3.jpg', '/static/images/banner4.jpg',
							'/static/images/banner1.jpg', '/static/images/banner2.jpg',
						],
						content: '今天发布了一条招聘信息，有需要的话可以联系下方电话号码，1517023xxxxxx'
					},
					{
						imglist: ['/static/images/banner1.jpg', '/static/images/banner2.jpg',
							'/static/images/banner3.jpg', '/static/images/banner4.jpg',
							'/static/images/banner1.jpg', '/static/images/banner2.jpg',
						],
						content: '今天发布了一条招聘信息，有需要的话可以联系下方电话号码，1517023xxxxxx'
					},

				],

			}
		},
		mounted() {},
		onShow() {

		},
		computed: {
			todos() {
				return this.$store.state.isAdd
			}
		},
		onLoad() {
			this.getlist();
		},
		onReady() {},
		methods: {
			getlist() {
				uni.showLoading({
					title: '加载中'
				});
				this.status = 'loading'
				this.$H.post('/index/list_information', this.data).then(res => {
					this.status = 'loadmore'

					uni.hideLoading();

					res.data.list.data.forEach(item => {
						this.list.push(item);
					});
					this.data.page++;
				})
			},
			onReachBottom() {
				this.getlist();
			},
			/**
			 * 图片预览功能
			 * @param url_List 图片预览地址 
			 * @param index 预览的图片的索引 
			 */
			TanPreviewImage(index, src) {
				uni.previewImage({
					current: index,
					urls: src
				});
			},
			goto(id) {
				uni.navigateTo({
					url: '/pages/square-ds/square-ds?id=' + id
				})
			},
			
			// 发布
			toProblem(){
				uni.navigateTo({
					url: '/pages/add/add'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5;
	}

	.square-page {
		background: #f5f5f5;
	}

	.square-item {
		margin: 20rpx 0px;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		background: #fff;

		.square-user-top {
			display: flex;
			align-items: center;
			padding: 0px 10rpx;

			.user-img {
				width: 70rpx;
				height: 70rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 10rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.user-cont {
				.user-name {
					color: #333;
					font-size: 32rpx;
				}

				.user-time {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.square-cont {
			padding: 10rpx;
			color: #333;
			font-size: 28rpx;
		}

		.square-img {
			display: flex;
			flex-wrap: wrap;

			.imgbox {
				width: 33.33%;
				height: 200rpx;
				padding: 0px 10rpx;
				box-sizing: border-box;
				margin-bottom: 10rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.fabu {
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		background: #fff;
		border-radius: 50%;

		.Ticonfont {
			font-size: 50rpx;
		}

		color: #17bf8b;
	}


	.noInfo {
		text-align: center;
		color: #666;
		margin: 50rpx auto;

		.Ticon-zanwushuju {
			font-size: 100rpx;
			color: #666;
			text-align: center;
			display: block;
		}

	}

	.naviconentent {
		position: fixed;
		right: 22rpx;
		bottom: 170rpx;
		width: 55rpx;
		height:140rpx;
		background: linear-gradient(0deg, #1BACBD 0%, #1BBDAC 100%);
		box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(27, 173, 188, 0.5);
		border-radius: 43rpx;
		text-align: center;
		color: #FFF;
		padding: 0 15rpx;
		font-size: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>